<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="apply-box flex-center w100">
		<image v-if="promotionBg" :src="promotionBg" class="box-bg" mode="widthFix"></image>
		<!-- 	<view class="cancel-tips w100" v-if="proxyTips">
			<text class="title">申请代理说明：</text>
			<view class="tips-item flex">
				<text class="icon"></text>
				<text class="text">{{proxyTips}}</text>
			</view>
		</view> -->
		<!-- 提交状态 -->
		<view class="content-box">
			<view class="status-box flex" v-if="proxyInfo&&proxyInfo.applyState!=-1">
				<view class="name-box flex-row-center" v-if="proxyInfo.applyState==0">
					<up-icon name="clock" color="#593211" size="84rpx"></up-icon>
					<text class="name ing">申请正在审核中</text>
					<text class="detail">联系电话: 19326416371</text>
				</view>
				<view class="name-box flex-center" v-else-if="proxyInfo.applyState==1">
					<up-icon name="checkmark-circle" color="#5AC725" size="58rpx"></up-icon>
					<text class="name sucss">申请代理审核通过</text>
					<view class="flex-center w100">
						<up-button :customStyle="{'color':'#fff','height':'64rpx','width':'100%'}" @click="toApply"
							text="前往代理中心" shape="circle"
							color="#593211"></up-button>
					</view>
				</view>
				<template v-else-if="proxyInfo.applyState==2">
					<view class="name-box flex-row-center">
						<up-icon name="close-circle" color="#F56C6C" size="58rpx"></up-icon>
						<text class="name err">审核未通过！</text>
					</view>
					<text class="reason">原因：{{proxyInfo.applyReason}}</text>
				</template>
			</view>
			<view class="from w100" v-if="proxyInfo.applyState!=1&&proxyInfo.applyState!=0">
				<view class="from-item flex-row-center">
					<text class="from-name">代理地区</text>
					<areaPickerVue :areaInfo="areaInfo" @confirmArea="confirmArea"></areaPickerVue>
				</view>
				<!-- 提交 -->
				<view class="submit-box flex-center w100">
					<up-button :customStyle="{'color':'#fff','height':'64rpx','width':'100%'}" @click="submitApply"
						text="立即提交" loadingText="提交中" :loading="proxyInfo.loadingState" shape="circle"
						color="#593211"></up-button>
				</view>
			</view>
			<text class="tips-text" @click="viewTips">代理说明</text>
		</view>

	</view>
</template>

<script setup>
	import {
		isValidPhoneNumber,
		validateForm
	} from '@/utils/utools.js';
	import {
		userInfoStore
	} from '../../stores/user';
	import {
		configInfoStore
	} from '@/stores/config.js';
	const {
		configInfo
	} = configInfoStore();
	const proxyTips = ref(computed(() => configInfo.proxy_protocal?.value))
	const promotionBg = ref(computed(() => configInfo.proxy_join_bg?.value));
	import areaPickerVue from '@/components/area/areaPicker.vue';
	import {
		reactive
	} from 'vue';
	const userStore = userInfoStore();
	const proxyInfo = reactive({
		proxyAddress: '',
		loadingState: false,
		applyState: -1, //0申请中 1申请成功 2申请失败 
		applyReason: '', //申请失败原因
	})
	const areaInfo = reactive({
		city: userStore.userInfo?.city,
		province: userStore.userInfo?.province,
		district: userStore.userInfo?.district,
		area: userStore.userInfo?.area,
	});
	onLoad(() => {
		getProxyApplyDetail();
	});
	const getProxyApplyDetail = async () => { //获取代理申请详情
		const res = await $Api.user.proxyApplyDetail();
		if (res.code == 1) {
			if (res.data) {
				proxyInfo.applyState = res.data.status;
				proxyInfo.applyReason = res.data.reason;
			}
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'error',
				duration: 2000
			});
		}
	}
	const viewTips = () => {
		uni.showModal({
			title: '代理入驻说明',
			content: proxyTips.value,
			success: function(res) {
				if (res.confirm) {} else if (res.cancel) {}
			}
		});

	}

	const confirmArea = (area) => { //确认选择省市区
		areaInfo.city = area.city;
		areaInfo.province = area.province;
		areaInfo.district = area.district;
		// console.log('confirmArea', area, areaInfo);
	};
	const submitApply = async () => { //提交申请
		if (proxyInfo.loadingState) return;
		proxyInfo.loadingState = true;
		const res = await $Api.user.proxyApply({
			city: areaInfo.city,
			province: areaInfo.province,
			district: areaInfo.district,
		});
		if (res.code == 1) {
			uni.showToast({
				title: '提交成功',
				icon: 'success',
				duration: 2000
			});
			setTimeout(() => {
				uni.navigateBack();
				proxyInfo.loadingState = false;
			}, 1200)
		} else {
			proxyInfo.loadingState = false;
			uni.showToast({
				title: res.msg,
				icon: 'error',
				duration: 2000
			});
		}
		//TODO:提交代理申请

	};
	const toApply = () => { //前往代理
		uni.redirectTo({
			url: '/page_user/views/agencyCenter'
		});
	}
</script>
<style lang="scss">
	.placeholderClass {
		color: $placeholder-color !important;
		font-size: 26rpx;
		font-weight: 500;
	}

	.u-textarea__count,
	.u-input,
	.u-textarea {
		padding: 0 !important;
		background-color: transparent !important;
	}
</style>
<style lang="scss" scoped>
	.apply-box {
		flex-direction: column;
		padding: 24rpx;
		height: 100vh;
		box-sizing: border-box;
		overflow: hidden;
	}

	.box-bg {
		position: absolute;
		width: 750rpx;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: -1;
	}

	.cancel-tips {
		border-radius: 24rpx;
		border: 2rpx solid rgba(105, 187, 176, 1);
		background-color: #222E30;
		padding: 35rpx;

		.title {
			display: block;
			font-size: 32rpx;
			font-weight: 500;
			color: $name-color;
			margin-bottom: 48rpx;
		}

		.tips-item {
			margin-bottom: 24rpx;

			.icon {
				border-radius: 50%;
				width: 12rpx;
				height: 12rpx;
				display: block;
				margin-right: 12rpx;
				background-color: #7EDE9E;
				flex-shrink: 0;
				margin-top: 14rpx;
			}

			.text {
				font-size: 28rpx;
				color: $description-color;
			}
		}

		.tips {
			font-size: 28rpx;
			display: block;
			color: $description-color;
			margin-top: 48rpx;
		}
	}

	.content-box {
		border: 1rpx solid #ccc;
		background-color: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		padding: 24rpx;
		border-radius: 18rpx;
		min-width: 600rpx;
	}

	.status-box {
		width: 100%;
		flex-direction: column;
		margin-top: 24rpx;

		.name-box {
			flex-direction: column;
		}

		.name {
			color: #593211;
			font-size: 30rpx;
			margin: 20rpx 0;
		}

		.detail {
			color: #593211;
			font-size: 28rpx;
		}

		.err {
			color: #F56C6C;
		}

		.sucss {
			color: #5AC725;
		}

		.ing {
			color: #593211;
		}

		.reason {
			font-size: 28rpx;
			color: #593211;
			margin-top: 12rpx;
		}
	}

	.from-item {
		box-sizing: border-box;
		width: 100%;
		margin-top: 60rpx;
		justify-content: space-between;

		.from-name {
			display: block;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-right: 38rpx;
		}

		.up-textarea-box {
			color: #fff;
		}


	}

	.submit-box {
		margin-top: 32rpx;
	}

	.tips-text {
		display: block;
		width: 100%;
		text-align: center;
		color: #93612E;
		font-size: 28rpx;
		margin-top: 24rpx;
		text-decoration: underline;
		text-decoration-color: #93612E;
	}
</style>